<script setup lang="ts">
import { ref, reactive } from "vue";
import navbar from "@/components/navbar/navbar.vue";
import cardBox from "./components/card.vue";
import { collectList } from "@/apis/collect";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import noneBox from "@/components/noneBox/noneBox.vue";

const navbarFixed = ref(false);
let state = reactive({
  collectList: [], //收藏列表
  pageSize: 10, //条数
  pageNum: 1, //页数
  isMore: false,
});

// 获取收藏榜
const getCollectList = async () => {
  let params = {
    pageSize: state.pageSize,
    pageNum: state.pageNum,
  };
  let { rows, code } = await collectList(params);
  //console.log(rows, code);
  if (code == "200") {
    // state.collectList = rows;
    if (rows.length <= 0) {
      state.isMore = true;
      return false;
    }

    state.pageNum++;

    for (let i = 0; i < rows.length; i++) {
      state.collectList.push(rows[i]);
    }
  }
  //console.log("state.collectList", state.collectList);
};

const cardClick = (item: any) => {
  // appUserId
  //console.log(item.appUserId, "-----");
  // uni.navigateTo({
  //   url: `/pagesMerchand/store?&shopId=${item.appUserId}`
  // })
  uni.navigateTo({
    url: `/pagesMerchand/stone-details?&id=${item.id}`,
  });
};

onLoad(() => {
  // 获取收藏榜
  getCollectList();
});

onReachBottom((e: any) => {
  //console.log(e, "----触底了----");
  getCollectList();
});
</script>

<template>
  <navbar :fixed="navbarFixed" :back="true" title="收藏榜" />
  <view class="main-box" v-if="state.collectList.length > 0">
    <view class="title-text">石友收藏榜</view>
    <view class="">
      <view v-for="(item, index) in state.collectList" :key="index">
        <cardBox
          :cardItem="item"
          :cardIndex="index"
          @tap="cardClick(item)"
        ></cardBox>
      </view>
      <!-- <image src="" mode="scaleToFill" /> -->
    </view>
    <!-- v-if="state.isMore" -->
    <uv-load-more
      status="nomore"
      fontSize="12px"
      nomoreText="我也是有底线的~"
      :line="true"
    />
  </view>
  <noneBox v-if="state.collectList.length <= 0"></noneBox>
</template>

<style lang="scss">
//
.main-box {
  position: relative;
  z-index: 2;
  padding: 50rpx 30rpx;
  box-sizing: border-box;
  background: url("https://www.stoneplayer.com/background/underlay.jpg") no-repeat;
  background-size: 100% 620rpx;
}

.title-text {
  margin-bottom: 20rpx;
  color: rgba(255, 255, 255, 1);
  font-size: 56rpx;
}
</style>
